<template>
  <div id="app">
    <header class="mk-bar">
      <h1>mk-ui</h1>
    </header>
    <section class="mk-content" ref="mfct">
      <ul class="mk-list">
        <li class="mk-item border-bottom-1px" v-for="(component,index) in components" :key="index">
          <router-link class="link" :to="component.path">{{component.text}}
            <i class="mkic-arrow"></i>
          </router-link>
        </li>
      </ul>
    </section>
    <mk-view></mk-view>
  </div>
</template>
<style lang="scss" >
@import '~assets/stylesheets/main';

html,
body,
#app {
  height: 100%;
}
body {
  background: #ffffff;
  overflow: hidden;
}
.mk-bar {
  z-index: 10;
  position: absolute;
  right: 0;
  left: 0;
  height: rem(88px);
  text-align: center;
  line-height: rem(88px);
  background-color: #f7f7f7;
  box-shadow: 0 1px 6px #ccc;
  backface-visibility: hidden;
  h1 {
    font-size: 18px;
    font-weight: 500;
  }
}
.mk-content {
  position: absolute;
  top: rem(88px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  .mk-list {
    padding-left: rem(20px);
    .mk-item {
      height: rem(80px);
      line-height: rem(80px);
      .link {
        display: block;
        position: relative;
        width: 100%;
        color: #333;
        text-decoration: none;
        outline: 0;

        .mkic-arrow {
          position: absolute;
          right: 0;
          padding: 0 5px;
          color: #ccc;
        }
      }
    }
  }
}
</style>
<script>
import MkView from './components/mk-view.vue'
export default {
  data() {
    return {
      components: [
        {
          path: '/loading',
          text: 'loading'
        },
        {
          path: '/modal',
          text: 'modal'
        },
        {
          path: '/button',
          text: 'button'
        },
        {
          path: '/picker',
          text: 'picker'
        },
        {
          path: '/dialog',
          text: 'dialog'
        }
      ]
    }
  },
  components: {
    MkView
  }
}
</script>
